<template>
	<view>
		<view class="filter-panel" :class="show == true?'mask':''" @click="show = !show">
			<view class="u-p-30 bg-white filter-panel-search">
				<view class="u-flex">
					<view class="u-flex-1">
						<u-search v-model="key" :placeholder="placeholder" :show-action="false" shape="square" clearabled @change="searchKeyword"></u-search>
					</view>
					<view class="u-p-l-20" @click.stop="show = !show">
						<text class="u-p-r-10">筛选</text>
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
			</view>
			<!-- 筛选面板 -->
			<view class="filter-container" v-if="show == true">
				<!-- 原有的筛选条件 -->
				<view class="default-filters" v-if="filterType.includes('time')">
					<!-- 时间筛选 -->
					<view class="item">
						<view class="u-p-b-10"><text class="tips-txt">时间筛选</text></view>
						<view class="tag-con">
							<view class="cell" :class="item.check == true?'on':''" v-for="(item,index) in timeOptions" :key="index" @click.stop="choose(item,'timeOptions','timeType')">
								<text>{{item.label}}</text>
							</view>
						</view>
						<!-- 已选条件展示 -->
						<view v-if="timeTags.length" class="selected-tags u-p-t-5 u-p-r-30" @click.stop="showCalendar = true">
							<u-tag v-for="(tag, index) in timeTags" :key="index" :text="tag.text" :type="tag.type"
								@close.stop="removeTag(tag)" mode="plain"/>
						</view>
					</view>
					<!-- 站点筛选 -->
					<view class="item" v-if="filterType.includes('store')">
						<view class="u-p-t-10"><text class="tips-txt">站点筛选</text></view>
						<view class="input-text u-flex u-m-l-0" @click.stop="selectedStore = true">
							<text>{{filterStoreName}}</text>
							<view class="u-flex-1"></view>
							<u-icon name="arrow-right" class="tips-txt"></u-icon>
						</view>
					</view>
					<!-- 店员筛选 -->
					<view class="item" v-if="filterType.includes('staff')">
						<view class="u-p-t-10"><text class="tips-txt">员工筛选</text></view>
						<view class="input-text u-flex u-m-l-0" @click.stop="selectedStaff = true">
							<text>{{filterStaffName}}</text>
							<view class="u-flex-1"></view>
							<u-icon name="arrow-right" class="tips-txt"></u-icon>
						</view>
					</view>
					<!-- 支付方式 -->
					<view class="item" v-if="filterType.includes('payway')">
						<view class="u-p-t-10 u-p-b-10"><text class="tips-txt">支付方式</text></view>
						<view class="tag-con">
							<view class="cell" :class="item.check == true?'on':''" v-for="(item,index) in paywayOptions" :key="index" @click.stop="choose(item,'paywayOptions','payway')">
								<text>{{item.label}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 具名插槽，用于插入额外筛选条件 -->
				<view class="extra-filters">
					<slot name="extra-filters"></slot>
				</view>
				<!-- 操作按钮区域 -->
				<view class="filter-actions">
					<slot name="actions">
						<!-- 默认的重置和搜索按钮 -->
						<view class="bottom-btn">
							<view class="btn cancel u-m-r-30" @click="clean">清空</view>
							<view class="btn confirm" @click="emitFilter()">确定</view>
						</view>
					</slot>
				</view>
			</view>
			<!-- 时间选择 -->
			<u-calendar v-model="showCalendar" mode="range" active-bg-color="#10beca" @change="handleDateChange" />
			<!-- 站点列表选择 -->
			<storeList v-if="filterType.includes('store')" v-model="selectedStore" @confirm="selectStore" @close="selectedStore = false"></storeList>
			<!-- 员工选择 -->
			<staffList v-if="filterType.includes('staff')" v-model="selectedStaff" @confirm="selectStaff" @close="selectedStaff = false"></staffList>
		</view>
		<u-mask :show="show" @click="show = false" z-index="9"></u-mask>
	</view>
</template>

<script>
	import storeList from '@/components/form-select-type/store-list.vue'
	import staffList from '@/components/form-select-type/staff-list.vue'
	
	export default {
		components:{
			storeList,
			staffList
		},
		props:{
			filterType:{
				type: Array,
				default:()=> ['time'] //['time','store','staff','payway']
			},
			placeholder:{
				type: String,
				default: '请输入关键词'
			}
			// showFilter:{
			// 	type: Boolean,
			// 	default: false
			// }
		},
		data() {
			return {
				show: false,
				key: '',
				timeOptions: [ { label: '全部', value: 0, check: true }, { label: '今日', value: 1, check: false }, { label: '昨日', value: 2, check: false }, { label: '本月', value: 3, check: false }, { label: '上月', value: 4, check: false }, { label: '本季度', value: 5, check: false }, { label: '上季度', value: 6, check: false }, { label: '本年', value: 7, check: false }, { label: '上年', value: 8, check: false }, { label: '自定义日期', value: 9, check: false } ],
				paywayOptions: [{ label: '微信支付', value: 1, check: false }, { label: '现金支付', value: 2, check: false }],
				// 弹出时间范围选择
				showCalendar: false,
				filterValues: {
					timeType: 0,
					// storeId: 0,
					// staffId: 0
				},
				timeTags: [],
				// 其他筛选条件
				// filterStoreId: 0,
				selectedStore: false,//选择站点
				filterStoreName: "选择站点",
				selectedStaff: false,//选择店员
				filterStaffName: "选择店员"
			}
		},
		watch:{
			'filterValues.timeType':{
				immediate: true,
				deep: true, // 启用深度监听
				handler(newVal) {
					if(newVal == 9){
						this.showCalendar = true
					}else{
						this.timeTags = []
					}
				}
			}
		},
		mounted() {
			
		},
		methods: {
			searchKeyword(){
				// this.$emit('searchKeyword',this.key)
				this.emitFilter()
			},
			emitFilter() {
				this.$emit('filter-change', {
					...this.filterValues,
					key: this.key
				})
			},
			handleDateChange(dates) {
				this.timeTags= [{
					key: 'dateRange',
					text: `自定义时间筛选：${dates.startDate} 至 ${dates.endDate}`
				}]
				this.filterValues.startDate = dates.startDate
				this.filterValues.endDate = dates.endDate
				this.emitFilter()
			},
			clean(){
				this.filterValues = {
					timeType: 0,
					// sort: 1
				}
				this.timeOptions = [ { label: '全部', value: 0, check: true }, { label: '今日', value: 1, check: false }, { label: '昨日', value: 2, check: false }, { label: '本月', value: 3, check: false }, { label: '上月', value: 4, check: false }, { label: '本季度', value: 5, check: false }, { label: '上季度', value: 6, check: false }, { label: '本年', value: 7, check: false }, { label: '上年', value: 8, check: false }, { label: '自定义日期', value: 9, check: false } ]
				this.key = ''
				this.filterStoreName = '选择站点'
				this.filterStaffName = '选择员工'
				this.paywayOptions = [{ label: '微信支付', value: 1, check: false }, { label: '现金支付', value: 2, check: false }]
				this.emitFilter()
			},
			choose(item,options,type){
				this[options].map((cell)=>{
					cell.check = false
				})
				item.check = true
				this.filterValues[type] = item.value
				// this.$set(this[options],'check',true)
				// this[options].find((cell)=>cell.value == item.value).check = true
				// this.$forceUpdate()
				console.log(this[options],item)
			},
			// 筛选站点
			selectStore(item){
				console.log('筛选站点:',item)
				this.filterStoreName = item.name
				// this.filterStoreId = item.id
				this.filterValues.filterStoreId = item.id
			},
			// 筛选店员
			selectStaff(item){
				this.filterStaffName = item.name
				// this.filterStaffId = item.id
				this.filterValues.filterStaffId = item.id
			},
		}
	}
</script>

<style lang="scss" scoped>
	.filter-panel{
		position: relative;
		// &.mask{
		// 	&:after{
		// 		content: '';
		// 		position: absolute;
		// 		top: 0;
		// 		height: 100vh;
		// 		width: 100%;
		// 		background-color: rgba(0,0,0,0.1);
		// 		z-index: 10;
		// 	}
		// }
	}
	.filter-panel-search{
		position: relative;
		z-index: 99;
	}
	.filter-container{
		position: sticky;
		width: 100%;
		padding: 30rpx;
		z-index: 99;
		background: #fff;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
		.tag-con{
			display: flex;
			flex-wrap: wrap;
			.cell{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 60rpx;
				padding: 20rpx;
				border: 1px solid $u-border-color;
				margin: 5rpx 10rpx 10rpx 0;
				border-radius: 10rpx;
				font-size: 24rpx;
				&.on{
					color: $u-color-blue;
					border-color: $u-color-blue;
				}
			}
		}
		.bottom-btn{
			display: flex;
			margin-top: 30rpx;
			.btn{
				flex: 1;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				&.cancel{
					background-color: $u-color-light;
				}
				&.confirm{
					background-color: $u-color-blue;
					color: #fff;
				}
			}
		}
	}
	.input-text {
		border: 1px solid $u-border-color;
		border-radius: 5px;
		height: 70rpx;
		margin: 20rpx 0;
		padding-right: 20rpx;
		padding-left: 20rpx;
		line-height: 70rpx;
		width: 100%;
		margin-left: 30rpx;
		input{
			height: 70rpx;
		}
	}
</style>
